<template>
  <div class="date-picker">
    <div class="inputType1">
      <input
        :class="{
          inputType2: dateValue != dateValue2,
          inputType3: dateValue === dateValue2
        }"
        v-model="dateValue"
        @click="openPanel"
      />

      <li class="el-icon-circle-close" v-if="iconclose" @click="cleaninput()"></li>
    </div>

    <transition name="fadeDownBig">
      <div class="date-panel" v-show="panelState">
        <div class="leftbar">
          <div class="rightbar">
            <span class="span-type1" @click="quickSelect('今天')">今天</span>
            <span class="span-type1" @click="quickSelect('昨天')">昨天</span>
            <span class="span-type1" @click="quickSelect('一周前')">一周前</span>
          </div>
          <div class="topbar">
            <!-- &lt &gt 分别用来表示左括号和右括号，也可用icon图标表示 -->
            <span @click="leftBig" style="margin-right:15px;">&lt;&lt;</span>
            <span @click="left" style="margin-right:15px;">&lt;</span>
            <span class="year" @click="panelType = 'year'">{{ tmpYear }}年</span>
            <span class="month" @click="panelType = 'month'">{{ changeTmpMonth }}月</span>
            <span @click="right" style="margin-left:15px;">&gt;</span>
            <span @click="rightBig" style="margin-left:15px;">&gt;&gt;</span>
          </div>
          <!-- 年面板 -->
          <div class="type-year" v-show="panelType === 'year'">
            <ul class="year-list">
              <li v-for="(item, index) in yearList" :key="index" @click="selectYear(item)">
                <span :class="{ selected: item === tmpYear }">{{ item }}</span>
              </li>
            </ul>
          </div>
          <!-- 月面板 -->
          <div class="type-year" v-show="panelType === 'month'">
            <ul class="year-list">
              <li v-for="(item, index) in monthList" :key="index" @click="selectMonth(item)">
                <span :class="{ selected: item.value === tmpMonth }">
                  {{
                  item.label
                  }}
                </span>
              </li>
            </ul>
          </div>
          <!-- 日期面板 -->
          <div class="date-group" v-show="panelType === 'date'">
            <span v-for="(item, index) in weekList" :key="index" class="weekday">{{ item.label }}</span>
            <ul class="date-list">
              <li
                v-for="(item, index) in dateList"
                v-text="item.value"
                :class="{
                  preMonth: item.previousMonth,
                  nextMonth: item.nextMonth,
                  overTheWeekend: item.overTheWeekend,
                  selected:
                    date === item.value &&
                    month === tmpMonth &&
                    item.currentMonth,
                  invalid: validateDate(item)
                }"
                :key="index"
                @click="selectDate(item)"
              ></li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iconclose: false,
      dateValue: '', // 输入框显示日期
      dateValue2: '选择日期',
      date: new Date().getDate(), // 当前日期
      panelState: false, // 初始值，默认panel关闭
      tmpMonth: new Date().getMonth(), // 临时月份，可修改
      month: new Date().getMonth(),
      tmpYear: new Date().getFullYear(), // 临时年份，可修改
      weekList: [
        { label: '日', value: 0 },
        { label: '一', value: 1 },
        { label: '二', value: 2 },
        { label: '三', value: 3 },
        { label: '四', value: 4 },
        { label: '五', value: 5 },
        { label: '六', value: 6 }
      ], // 周
      monthList: [
        { label: '1', value: 0 },
        { label: '2', value: 1 },
        { label: '3', value: 2 },
        { label: '4', value: 3 },
        { label: '5', value: 4 },
        { label: '6', value: 5 },
        { label: '7', value: 6 },
        { label: '8', value: 7 },
        { label: '9', value: 8 },
        { label: '10', value: 9 },
        { label: '11', value: 10 },
        { label: '12', value: 11 }
      ], // 月
      nowValue: 0, // 当前选中日期值
      panelType: 'date' // 面板状态
    }
  },

  props: {
    value: {
      type: [Date, String],
      default: ''
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd'
    }
  },
  computed: {
    dateList() {
      //获取当月的天数
      let currentMonthLength = new Date(
        this.tmpYear,
        this.tmpMonth + 1,
        0
      ).getDate()
      // let dataList = []
      // for (let i = 0; i < currentMonthLength; i++) {
      //   dataList.push({ currentMonth: true, value: i + 1 })
      // }
      // return dataList
      let dateList = Array.from(
        { length: currentMonthLength },
        (val, index) => {
          let getday = new Date(this.tmpYear, this.tmpMonth, index + 1)
          let flag = false
          if (getday.getDay() == '0' || getday.getDay() == '6') {
            flag = true
          } else {
            flag = false
          }

          return {
            currentMonth: true,
            overTheWeekend: flag,
            value: index + 1
          }
        }
      )
      console.log(dateList)
      // 获取当月1号的星期是为了确定在1号前需要插多少天
      let startDay = new Date(this.tmpYear, this.tmpMonth, 1).getDay()
      // 确认上个月一共多少天
      let previousMongthLength = new Date(
        this.tmpYear,
        this.tmpMonth,
        0
      ).getDate()
      // 在1号前插入上个月日期
      for (let i = 0, len = startDay; i < len; i++) {
        dateList = [
          { previousMonth: true, value: previousMongthLength - i }
        ].concat(dateList)
      }
      // 补全剩余位置,至少14天，则 i < 15
      for (let i = 1, item = 1; i < 15; i++, item++) {
        dateList[dateList.length] = { nextMonth: true, value: i }
      }
      return dateList
    },

    changeTmpMonth() {
      return this.monthList[this.tmpMonth].label
    },
    // 通过改变this.tmpYear则可以改变年份数组
    yearList() {
      return Array.from({ length: 12 }, (value, index) => this.tmpYear + index)
    }
  },
  watch: {
    dateValue: function(newVal) {
      if (newVal != this.dateValue2) {
        this.iconclose = true
      } else if (newVal == this.dateValue2) {
        this.iconclose = false
      }
      // this.showiconclose()
    }
  },
  mounted() {
    this.dateValue = this.dateValue2
    if (this.value) {
      this.dateValue = this.formatDate(new Date(this.value).getTime())
    }
  },
  methods: {
    quickSelect(item) {
      let selectDay = new Date()
      if (item == '今天') {
        this.dateValue = this.formatDate(selectDay.getTime())
      } else if (item == '昨天') {
        this.dateValue = this.formatDate(
          selectDay.getTime() - 24 * 60 * 60 * 1000
        )
      } else if (item == '一周前') {
        this.dateValue = this.formatDate(
          selectDay.getTime() - 24 * 60 * 60 * 1000 * 7
        )
      }
      this.panelState = !this.panelState
    },
    cleaninput() {
      this.dateValue = this.dateValue2
    },
    // showiconclose() {
    //   if (this.dataValue != this.dateValue2) {
    //     this.iconclose = true
    //   } else {
    //     this.iconclose = false
    //   }
    // },

    openPanel() {
      this.panelState = !this.panelState
      this.panelType = 'date'
    },
    selectYear(item) {
      this.tmpYear = item
      this.panelType = 'month'
    },
    selectMonth(item) {
      this.tmpMonth = item.value
      this.panelType = 'date'
    },
    selectDate(item) {
      // 赋值 当前 nowValue,用于控制样式突出显示当前月份日期
      this.nowValue = item.value
      // 选择了上个月
      if (item.previousMonth) this.tmpMonth--
      // 选择了下个月
      if (item.nextMonth) this.tmpMonth++
      // 获取选中日期的 date
      let selectDay = new Date(this.tmpYear, this.tmpMonth, this.nowValue)
      // 格式日期为字符串后，赋值给 input
      this.dateValue = this.formatDate(selectDay.getTime())
      // 关闭面板
      this.panelState = !this.panelState
    },
    // 日期格式方法
    formatDate(date, fmt = this.format) {
      if (date === null || date === 'null') {
        return '--'
      }
      date = new Date(Number(date))
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          )
      }
      return fmt
    },
    // 确认是否为当前月份
    validateDate(item) {
      if (this.nowValue === item.value && item.currentMonth) return true
    },

    left() {
      if (this.panelType === 'year') this.tmpYear--
      else {
        if (this.tmpMonth === 0) {
          this.tmpYear--
          this.tmpMonth = 11
        } else this.tmpMonth--
      }
    },
    leftBig() {
      if (this.panelType === 'year') this.tmpYear -= 12
      else this.tmpYear--
    },
    right() {
      if (this.panelType === 'year') this.tmpYear++
      else {
        if (this.tmpMonth === 11) {
          this.tmpYear++
          this.tmpMonth = 0
        } else this.tmpMonth++
      }
    },
    rightBig() {
      if (this.panelType === 'year') this.tmpYear += 12
      else this.tmpYear++
    }
  }
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.date-picker {
  width: 220px;
  text-align: center;
  position: absolute;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
.topbar {
  padding-top: 8px;
}
.rightbar {
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 15px;
  border: 1px solid #e5f3e9;
  border-radius: 3px;

  // display: inline;
}
.leftbar {
  // display: inline;
}
.topbar span {
  display: inline-block;
  width: 20px;
  height: 30px;
  line-height: 30px;
  color: #515a6e;
  cursor: pointer;
}
.topbar span:hover {
  color: #2d8cf0;
}
.span-type1 {
  margin-right: 20px;
}
.span-type1:hover {
  color: #308cee;
  font-size: 17px;
  font-weight: 700;
}
.topbar .year,
.topbar .month {
  width: 40px;
}
.year-list {
  height: 200px;
  width: 210px;
}
.year-list .selected {
  background: #2d8cf0;
  border-radius: 10px;
  color: #fff;
}
.year-list li {
  display: inline-block;
  width: 70px;
  height: 50px;
  line-height: 50px;
  border-radius: 6px;
  cursor: pointer;
}
.year-list span {
  display: inline-block;
  line-height: 16px;
  padding: 10px;
}
.year-list span:hover {
  background: #e1f0fe;
}
.weekday {
  display: inline-block;
  font-size: 13px;
  width: 33px;

  color: #000802;
  text-align: center;
}

.date-panel {
  width: 110%;
  box-shadow: 0 0 8px #ccc;
  background: #fff;

  z-index: 99999;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.date-list {
  width: 110%;
  text-align: left;
  height: 180px;
  overflow: hidden;
  margin-top: 4px;
}
.date-list li {
  display: inline-block;
  width: 32px;
  height: 28px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  color: #000;
  border: 1px solid #fff;
  border-radius: 4px;
}
.date-list .selected {
  border: 1px solid #2d8cf0;
}
.date-list .invalid {
  background: #2d8cf0;
  color: #fff;
}
.date-list .preMonth,
.date-list .nextMonth {
  color: #c5c8ce;
  cursor: no-drop;
}
.date-list .overTheWeekend {
  color: #ee30dd;
  font-weight: blod;
}
.date-list li:hover {
  background: #e1f0fe;
}
.el-icon-circle-close {
  display: inline-block;

  // display: inline;
  position: absolute;
  left: 90%;
  top: 30%;
  z-index: 1;
}
.inputType1 {
  position: relative;
  width: 210px;
  height: 32px;
  // border: 2px solid #dcdee2;
}
.inputType2 {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 12px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  position: relative;
  cursor: text;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  margin-bottom: 6px;
  background-image: url(../assets/images/icon.png);
  background-repeat: no-repeat;
  // background-position:1% 20%;
  background-size: 30px 30px;
  padding-left: 30px;
}
.inputType2:hover {
  border: 1px solid #5e6560;
}
.inputType3:hover {
  border: 1px solid #5e6560;
}
.inputType3 {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 12px;
  border: 1px solid #dcdee2;
  border-radius: 4px;

  color: #c5c8ce;
  background-color: #fff;
  background-image: none;
  position: relative;
  cursor: text;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  margin-bottom: 6px;
  background-image: url(../assets/images/icon.png);
  background-repeat: no-repeat;
  // background-position:1% 20%;
  background-size: 30px 30px;
  padding-left: 30px;
}

.fadeDownBig-enter-active,
.fadeDownBig-leave-active,
.fadeInDownBig {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.fadeDownBig-enter-active {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
.fadeDownBig-leave-active {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0.8;
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0.8;
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.8;
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
